<template>
	<view>
		<view class="flex padding justify-around">
			<view 
				v-for="(item,index) in tabArr" 
				:class="{'text-gray':index!=tabIdx}" 
				@click="handleTab(index)"
			>
				{{item.name}}
			</view>
		</view>
		<view class="cake-list-cont flex flex-wrap justify-between">
			<!-- <cake-item></cake-item> -->
			<cake-item v-for="item in cakelist" v-bind:gdata="item"></cake-item>
		</view>
	</view>
</template>

<script>
	import CakeItem from '../../components/cake-item.vue'
	import {
		$http
	} from '../../utils/http.js'
	import {
		cakeGet
	} from '../../api/cake.js'
	export default {
		data() {
			return {
				cakelist: [],
				tabArr: [{
						name: '蛋糕',
						bcid: 1
					},
					{
						name: '面包',
						bcid: 11
					},
					{
						name: '小食',
						bcid: 6
					},
					{
						name: '配件',
						bcid: 5
					},
				],
				tabIdx: 0
			};
		},
		components: {
			'cake-item': CakeItem
		},
		onLoad() { //页面vue文件中，需要使用onLoad
			// 方法1
			console.log('cake页面的onLoad');
			// let url = `https://h5.mcake.com/api/0434b49d1ac28f9d?cityId=641&page=3&bid=1`
			// uni.request({
			// 	url,
			// 	method:'GET',
			// 	header:{
			// 		'access-token': 'c5543365a4af48910e1a798d45ffca56',
			// 		version: 'v1.0'
			// 	},
			// 	success: (res) => {
			// 		console.log(res);
			// 		this.cakelist = res.data.data.list
			// 	}
			// })

			// 方法2:
			// let url = '/api/0434b49d1ac28f9d?cityId=641&page=3&bid=1'
			// $http(url).then(res=>{
			// 	this.cakelist = res.data.data.list
			// })

			// 方法3: 请求LeanCloud数据
			cakeGet().then(res => {
				this.cakelist = res.data.results
			})
		},
		methods:{
			handleTab(idx){
				this.tabIdx = idx
				let {bcid} = this.tabArr[idx]
				cakeGet(bcid).then(res => {
					this.cakelist = res.data.results
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.cake-list-cont {
		padding: 15upx;
	}
</style>
